@import './variables.less';

.padding-10 {
  padding: 10px;
}

@red-color: #f87171;
@green-color: #4ade80;
.text {
  font-size: 14px;
}

// 使用变量
.text-primary {
  color: @primary-color;
}

// 嵌套选择器
.list {
  &:extend(.padding-10);
  border: @border-width solid @red-color;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 5px 10px;
    background-color: #3498db;
    // 状态选择器
    &.active {
      background-color: #0983d5;
    }
    .text {
      color: @white-color;
    }
  }
}

// 使用混合器
.border-radius(@radius) {
  border-radius: @radius;
}
.border-radius-4 {
  .border-radius(4px);
}
.border-radius-10 {
  .border-radius(10px);
}

// 使用 extends
.message {
  &:extend(.padding-10);
  &:extend(.border-radius-4);
  border: @border-width solid #ccc;
  font-weight: 600;
}
.success-message {
  &:extend(.message);
  border-color: @green-color;
  color: @green-color;
}
.error-message {
  &:extend(.message);
  border-color: @red-color;
  color: @red-color;
}

// 条件语句
@debug-mode: true;

// 调试样式
.debug when (@debug-mode) {
  &:extend(.padding-10);
  &:extend(.border-radius-4);
  border: @border-width solid @red-color;
}

// 生产样式
.debug when not (@debug-mode) {
  display: none;
}

// 循环
.loop(@index) when (@index > 0) {
  .item-@{index} {
    &:extend(.border-radius-4);
    width: 60px * @index;
    height: 30px;
    padding-left: 5px;
    background-color: @primary-color;
    .text {
      line-height: 30px;
      color: @white-color;
    }
  }
  .loop(@index - 1);
}

.loop(5);

